<template>
  <div class="carbon-platform">
    <!-- 保留原页面的导航栏、横幅、页脚等部分 -->
    <!-- Preloader -->
    <div class="preloader-wrapper" v-if="isLoading">
      <div class="preloader"></div>
    </div>

    <nav class="navbar sticky-top bg-white shadow-sm py-3">
      <!-- 导航栏内容保持不变 -->
      <div class="container">
        <div class="d-flex justify-content-between align-items-center w-100">
          <!-- 网站标志 -->
          <div class="navbar-logo">
            <span class="logo-icon">🌱</span>
            <span class="logo-text">绿碳平台</span>
          </div>

          <!-- 中间导航链接 - 桌面版 -->
          <ul class="navbar-nav list-unstyled d-flex flex-row gap-3 gap-lg-5 justify-content-center flex-wrap align-items-center mb-0 fw-bold flex-grow-1 mx-4">
            <li class="nav-item">
              <a href="/index" class="nav-link text-dark hover:text-primary transition-colors">首页</a>
            </li>
            <li class="nav-item">
              <a href="/shop" class="nav-link text-dark hover:text-primary transition-colors">碳积分市场</a>
            </li>
            <li class="nav-item">
              <a href="/blog" class="nav-link text-dark hover:text-primary transition-colors">博客</a>
            </li>
            <li class="nav-item">
              <a href="/contact" class="nav-link text-dark hover:text-primary transition-colors">联系我们</a>
            </li>
            <li class="nav-item">
              <a href="/about" class="nav-link text-dark hover:text-primary transition-colors">关于我们</a>
            </li>
            <li class="nav-item">
              <a href="/order" class="nav-link text-dark hover:text-primary transition-colors">我的订单</a>
            </li>
          </ul>

          <!-- 右侧功能区 - 使用emoji图标 -->
          <div class="d-flex align-items-center gap-4 gap-lg-5">
            <!-- 搜索按钮 -->
            <button class="btn p-2 text-dark hover:text-primary transition-colors" aria-label="搜索">
              <span class="fs-5">🔍</span>
            </button>

            <!-- 购物车 -->
            <a href="/cart" class="btn p-2 text-dark hover:text-primary transition-colors position-relative" aria-label="购物车">
              <span class="fs-5">🛒</span>
<!--              <span class="position-absolute top-0 right-0 btn-success text-white text-xs rounded-full h-5 w-5 flex items-center justify-center" style="border-radius: 50%;">3</span>-->
            </a>

            <!-- 用户菜单 -->
            <div class="dropdown">
              <button class="btn p-2 text-dark hover:text-primary transition-colors" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="用户菜单">
                <span class="fs-5">👤</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/login">登录</a></li>
                <li><a class="dropdown-item" href="/register">注册</a></li>
                <li><a class="dropdown-item" href="/account">我的账户</a></li>
              </ul>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="btn d-lg-none p-2 text-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-label="菜单">
              <span class="fs-5">☰</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 顶部横幅部分 -->
    <div class="banner-section">
      <div class="container">
        <div class="banner-content">
          <h1 class="banner-title">碳积分市场</h1>
        </div>
      </div>
    </div>

    <!-- 主内容区域 - 修改为碳积分相关内容 -->
    <main class="shop-page py-5">
      <div class="container-lg">
        <div class="row">
          <!-- 左侧分类栏 - 修改为碳积分分类 -->
          <div class="col-lg-3 mb-4">
            <div class="card border-0 shadow-sm mb-4">
              <div class="card-header bg-white border-bottom">
                <h5 class="mb-0">积分类型</h5>
              </div>
              <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item border-0"
                      v-for="category in categories"
                      :key="category.id"
                      @click="filterByCategory(category.id)"
                      :class="{ 'active': activeCategory === category.id }">
                    {{ category.name }}
                  </li>
                </ul>
              </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
              <div class="card-header bg-white border-bottom">
                <h5 class="mb-0">项目标签</h5>
              </div>
              <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                  <span class="badge bg-light text-dark border px-3 py-2"
                        v-for="tag in tags"
                        :key="tag"
                        @click="filterByTag(tag)">
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
              <div class="card-header bg-white border-bottom">
                <h5 class="mb-0">项目地区</h5>
              </div>
              <div class="card-body">
                <div class="form-check mb-2" v-for="region in regions" :key="region">
                  <input class="form-check-input" type="checkbox" :id="'region-'+region"
                         :value="region" v-model="selectedRegions">
                  <label class="form-check-label" :for="'region-'+region">
                    {{ region }}
                  </label>
                </div>
              </div>
            </div>

            <div class="card border-0 shadow-sm">
              <div class="card-header bg-white border-bottom">
                <h5 class="mb-0">积分数量区间</h5>
              </div>
              <div class="card-body">
                <div class="form-check mb-2" v-for="range in creditRanges" :key="range.label">
                  <input class="form-check-input" type="radio" name="creditRange"
                         :id="'credit-'+range.label" :value="range.value" v-model="selectedCreditRange">
                  <label class="form-check-label" :for="'credit-'+range.label">
                    {{ range.label }}
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧商品展示区 - 修改为碳积分项目展示 -->
          <div class="col-lg-9">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h4 class="mb-0">碳积分项目</h4>
              <div class="d-flex align-items-center">
                <div class="me-3">排序:</div>
                <select class="form-select form-select-sm" v-model="sortOption" style="width: 180px;">
                  <option value="default">默认排序</option>
                  <option value="price-asc">价格从低到高</option>
                  <option value="price-desc">价格从高到低</option>
                  <option value="rating">按评级排序</option>
                  <option value="newest">最新上线</option>
                </select>
              </div>
            </div>

            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
              <div class="col" v-for="credit in paginatedProducts" :key="credit.id">
                <div class="product-item">
                  <figure class="product-image">
                    <router-link to="/SingleProduct">
                      <img :src="credit.image" :alt="credit.name" class="img-fluid">
                    </router-link>
                  </figure>
                  <div class="product-info">
                    <h3 class="product-name">
                      <router-link to="/SingleProduct" class="text-decoration-none text-dark">
                        {{ credit.name }}
                      </router-link>
                    </h3>
                    <div class="product-rating">
                      <span class="stars">
                        <span v-for="n in 5" :key="n">
                          <span v-if="n <= credit.rating">★</span>
                          <span v-else>☆</span>
                        </span>
                      </span>
                      <span class="reviews">({{ credit.reviews }}条评价)</span>
                    </div>
                    <div class="product-price">
                      <span class="current-price">
                        ¥{{ credit.pricePerCredit }}/积分
                      </span>
                      <span class="original-price" v-if="credit.carbonReduction">
                        减排: {{ credit.carbonReduction }}吨CO₂
                      </span>
                    </div>
                    <div class="product-actions">
                      <div class="quantity-selector">
                        <input type="number" v-model.number="credit.quantity" min="1" class="form-control form-control-sm" :max="credit.availableQuantity">
                      </div>
                      <button @click="addToCart(credit)" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" class="btn btn-primary btn-sm add-to-cart">
                        购买积分
                      </button>
                      <button @click="toggleWishlist(credit)" class="btn btn-outline-secondary btn-sm wishlist">
                        {{ isInWishlist(credit.id) ? '♥ 已关注' : '♡ 关注' }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页保持不变 -->
            <nav class="mt-5" v-if="totalPages > 1">
              <ul class="pagination justify-content-center">
                <li class="page-item" :class="{ 'disabled': currentPage === 1 }">
                  <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                </li>
                <li class="page-item" v-for="page in visiblePages" :key="page"
                    :class="{ 'active': page === currentPage }">
                  <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                </li>
                <li class="page-item" :class="{ 'disabled': currentPage === totalPages }">
                  <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </main>

    <!-- 相关推荐部分 - 修改为碳相关推荐 -->
    <section class="related-searches py-5 bg-light">
      <div class="container-lg">
        <h2 class="section-title mb-4">热门碳积分项目</h2>
        <div class="d-flex flex-wrap gap-2 mb-5">
          <a href="#" class="fs-6 badge bg-white text-dark border px-3 py-2 text-decoration-none"
             v-for="item in relatedSearches" :key="item"
             @click.prevent="searchItem(item)">
            {{ item }}
          </a>
        </div>

        <div class="row row-cols-1 row-cols-md-5 g-4">
          <div class="col" v-for="feature in features" :key="feature.title">
            <div class="card h-100 border-0 bg-transparent">
              <div class="card-body text-center">
                <div class="feature-icon mb-3">
                  <span>{{ feature.icon }}</span>
                </div>
                <h5 class="card-title">{{ feature.title }}</h5>
                <p class="card-text text-muted">{{ feature.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚部分保持不变 -->
    <footer class="main-footer">
      <div class="container">
        <div class="footer-bottom">
          <p class="copyright">© 2025 绿碳平台 版权所有 | 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
import { cartApi } from '../api/index.js'

export default {
  name: 'ShopPage',
  data() {
    return {
      isLoading: false,
      shippingFee: 10,
      cartItems: [],
      activeCategory: null,
      selectedRegions: [],
      selectedCreditRange: null,
      sortOption: 'default',
      currentPage: 1,
      itemsPerPage: 12,
      hoverProductId: null,
      wishlist: [],
      // 碳积分类型分类
      categories: [
        // {id: 1, name: '全部项目', image: 'images/all-carbon.jpg'},
        {id: 2, name: '森林碳汇', image: 'images/forest-carbon.jpg'},
        {id: 3, name: '光伏减排', image: 'images/solar-carbon.jpg'},
        {id: 4, name: '风电项目', image: 'images/wind-carbon.jpg'},
        {id: 5, name: '甲烷回收', image: 'images/methane-carbon.jpg'},
        {id: 6, name: '节能项目', image: 'images/energy-saving.jpg'},
        {id: 7, name: '氢能项目', image: 'images/hydrogen-carbon.jpg'},
        {id: 8, name: '碳捕获', image: 'images/carbon-capture.jpg'}
      ],
      // 碳项目标签
      tags: ['国际认证', '本地项目', '大型项目', '社区项目', '新上线', '高性价比', '长期收益'],
      // 项目地区
      regions: ['华北地区', '华东地区', '华南地区', '西北地区', '西南地区', '东北地区', '国际项目'],
      // 积分数量区间
      creditRanges: [
        {label: '100积分以下', value: [0, 100]},
        {label: '100-500积分', value: [100, 500]},
        {label: '500-1000积分', value: [500, 1000]},
        {label: '1000-5000积分', value: [1000, 5000]},
        {label: '5000-10000积分', value: [5000, 10000]},
        {label: '10000积分以上', value: [10000, 999999]}
      ],
      // 碳积分项目数据
      products: [
        {
          id: 1,
          name: '内蒙古风电碳积分项目',
          image: 'https://picsum.photos/seed/solar/400/250',
          rating: 5,
          reviews: 125,
          pricePerCredit: '58.00',
          quantity: 100,
          availableQuantity: 5000,
          category: 4,
          region: '华北地区',
          tags: ['国际认证', '大型项目'],
          dateAdded: '2023-01-15',
          carbonReduction: 12500
        },
        {
          id: 2,
          name: '云南森林碳汇项目',
          image: 'https://picsum.photos/seed/wind/400/250',
          rating: 4,
          reviews: 98,
          pricePerCredit: '65.00',
          quantity: 100,
          availableQuantity: 12000,
          category: 2,
          region: '西南地区',
          tags: ['国际认证', '长期收益'],
          dateAdded: '2023-02-20',
          carbonReduction: 35000
        },
        {
          id: 3,
          name: '青海光伏电站项目',
          image: 'https://picsum.photos/seed/wind/400/250',
          rating: 5,
          reviews: 210,
          pricePerCredit: '52.00',
          quantity: 100,
          availableQuantity: 8000,
          category: 3,
          region: '西北地区',
          tags: ['国际认证', '高性价比'],
          dateAdded: '2022-11-10',
          carbonReduction: 22000
        },
        {
          id: 4,
          name: '江苏垃圾填埋气回收',
          image: 'https://picsum.photos/seed/biogas/400/250',
          rating: 4,
          reviews: 76,
          pricePerCredit: '48.00',
          quantity: 100,
          availableQuantity: 3500,
          category: 5,
          region: '华东地区',
          tags: ['本地项目', '社区项目'],
          dateAdded: '2023-03-05',
          carbonReduction: 8500
        },
        {
          id: 5,
          name: '广东工业园区节能改造',
          image: 'https://picsum.photos/seed/reforestation/400/250',
          rating: 4,
          reviews: 145,
          pricePerCredit: '55.00',
          quantity: 100,
          availableQuantity: 6200,
          category: 6,
          region: '华南地区',
          tags: ['本地项目', '高性价比'],
          dateAdded: '2022-10-15',
          carbonReduction: 15000
        },
        {
          id: 6,
          name: '山东氢能产业园项目',
          image: 'https://picsum.photos/seed/efficiency/400/250',
          rating: 4,
          reviews: 62,
          pricePerCredit: '72.00',
          quantity: 100,
          availableQuantity: 2800,
          category: 7,
          region: '华北地区',
          tags: ['新上线', '大型项目'],
          dateAdded: '2023-02-28',
          carbonReduction: 6800
        },
        {
          id: 7,
          name: '浙江碳捕获试点项目',
          image: 'https://picsum.photos/seed/community/400/250',
          rating: 4,
          reviews: 85,
          pricePerCredit: '85.00',
          quantity: 100,
          availableQuantity: 1500,
          category: 8,
          region: '华东地区',
          tags: ['新上线', '国际认证'],
          dateAdded: '2023-01-25',
          carbonReduction: 4200
        },
        {
          id: 8,
          name: '黑龙江林业碳汇项目',
          image: 'https://picsum.photos/seed/hydro/400/250',
          rating: 4,
          reviews: 73,
          pricePerCredit: '60.00',
          quantity: 100,
          availableQuantity: 9500,
          category: 2,
          region: '东北地区',
          tags: ['长期收益', '大型项目'],
          dateAdded: '2023-03-15',
          carbonReduction: 28000
        },
        {
          id: 9,
          name: '新疆风电基地项目',
          image:'https://picsum.photos/seed/forest5/400/250',
          rating: 3,
          reviews: 45,
          pricePerCredit: '49.00',
          quantity: 100,
          availableQuantity: 15000,
          category: 4,
          region: '西北地区',
          tags: ['高性价比', '大型项目'],
          dateAdded: '2023-02-10',
          carbonReduction: 42000
        },
        {
          id: 10,
          name: '澳大利亚林业碳汇',
          image: 'https://picsum.photos/seed/forest2/400/250',
          rating: 4,
          reviews: 58,
          pricePerCredit: '92.00',
          quantity: 100,
          availableQuantity: 4200,
          category: 2,
          region: '国际项目',
          tags: ['国际认证', '长期收益'],
          dateAdded: '2023-03-01',
          carbonReduction: 18000
        },
        {
          id: 11,
          name: '四川水电减排项目',
          image: 'https://picsum.photos/seed/forest3/400/250',
          rating: 4,
          reviews: 92,
          pricePerCredit: '53.00',
          quantity: 100,
          availableQuantity: 7800,
          category: 6,
          region: '西南地区',
          tags: ['本地项目', '高性价比'],
          dateAdded: '2023-02-15',
          carbonReduction: 21000
        },
        {
          id: 12,
          name: '德国光伏屋顶项目',
          image: 'https://picsum.photos/seed/forest4/400/250',
          rating: 4,
          reviews: 120,
          pricePerCredit: '88.00',
          quantity: 100,
          availableQuantity: 3200,
          category: 3,
          region: '国际项目',
          tags: ['国际认证', '社区项目'],
          dateAdded: '2022-12-05',
          carbonReduction: 9500
        }
      ],
      // 相关搜索修改为碳相关
      relatedSearches: [
        '自愿碳市场', 'CCER项目', 'VER碳积分', '碳资产管理',
        '碳中和咨询', '碳足迹计算', 'ESG报告', '绿色金融','碳积分交易',
        '绿色低碳','低碳生活'
      ],
      // 保持原有功能描述但调整为碳平台相关
      features: [
        {title: '合规保障', icon: '📜', description: '所有项目符合国家碳交易标准'},
        {title: '安全交易', icon: '🔒', description: '区块链技术保障交易安全透明'},
        {title: '专业认证', icon: '✅', description: '项目经过第三方专业机构认证'},
        {title: '全程服务', icon: '🤝', description: '提供碳资产生命周期管理服务'},
        {title: '实时行情', icon: '📊', description: '碳价实时更新，把握市场动态'}
      ],
      newsletter: {
        name: '',
        email: ''
      }
    }
  },
  computed: {
    // 保持原有计算属性逻辑，适应新的碳积分数据结构
    shippingFee() {
      return this.cartSubtotal >= 99 ? '0.00' : '10.00'
    },
    cartSubtotal() {
      return this.cartItems.reduce((total, item) => {
        return total + (item.price * item.quantity)
      }, 0).toFixed(2)
    },
    cartTotal() {
      const subtotal = parseFloat(this.cartSubtotal)
      const shipping = subtotal >= 99 ? 0 : 10
      return (subtotal + shipping).toFixed(2)
    },
    filteredProducts() {
      let filtered = [...this.products]
      // 按分类筛选
      if (this.activeCategory && this.activeCategory !== 1) {
        filtered = filtered.filter(p => p.category === this.activeCategory)
      }

      // 按地区筛选
      if (this.selectedRegions.length > 0) {
        filtered = filtered.filter(p => this.selectedRegions.includes(p.region))
      }

      // 按积分数量区间筛选
      if (this.selectedCreditRange) {
        const [min, max] = this.selectedCreditRange
        filtered = filtered.filter(p => {
          return p.availableQuantity >= min && p.availableQuantity <= max
        })
      }

      // 排序
      switch (this.sortOption) {
        case 'price-asc':
          filtered.sort((a, b) => parseFloat(a.pricePerCredit) - parseFloat(b.pricePerCredit))
          break
        case 'price-desc':
          filtered.sort((a, b) => parseFloat(b.pricePerCredit) - parseFloat(a.pricePerCredit))
          break
        case 'rating':
          filtered.sort((a, b) => b.rating - a.rating)
          break
        case 'newest':
          filtered.sort((a, b) => new Date(b.dateAdded) - new Date(a.dateAdded))
          break
        default:
          // 默认排序
          break
      }
      return filtered
    },
    visiblePages() {
      const pages = [];
      const maxVisible = 5;
      let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
      let end = Math.min(this.totalPages, start + maxVisible - 1);

      if (end - start + 1 < maxVisible) {
        start = Math.max(1, end - maxVisible + 1);
      }

      for (let i = start; i <= end; i++) {
        pages.push(i);
      }

      return pages;
    },
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredProducts.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredProducts.length / this.itemsPerPage);
    },
  },
  mounted() {
    this.loadBootstrap()
  },
  methods: {
    // 保持原有方法逻辑，适应新的碳积分数据结构
    loadBootstrap() {
      if (typeof window !== 'undefined') {
        require('bootstrap/dist/js/bootstrap.bundle.min')
      }
    },
    filterByCategory(categoryId) {
      this.activeCategory = categoryId
      this.currentPage = 1
    },
    filterByTag(tag) {
      console.log('按标签筛选:', tag)
      this.currentPage = 1
    },
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        window.scrollTo({top: 0, behavior: 'smooth'});
      }
    },
    async addToCart(credit) {
      // 检查是否超过可购买数量
      if (credit.quantity > credit.availableQuantity) {
        alert(`超出可购买数量，当前可购买最大数量为${credit.availableQuantity}`)
        credit.quantity = credit.availableQuantity
        return
      }

      // 获取当前用户ID（后端以业务主键 uid 查询）
      const currentUser = localStorage.getItem('currentUser');
      let userId = 1; // 默认使用 uid=1（便于演示）
      if (currentUser) {
        const userData = JSON.parse(currentUser);
        // 优先使用 uid，其次才回退到 id
        userId = userData.uid || userData.id || 1;
      }

      try {
        // 调用后端API添加商品到购物车
        const cartData = {
          userId: userId, // 这里的 userId 实际传的是业务主键 uid
          factoryId: credit.fid || credit.id,
          quantity: credit.quantity
        };

        const response = await cartApi.addToCart(cartData);
        
        if (response.data && response.data.code === '1') {
          credit.quantity = 1;
          alert('已加入购物车');
          
          // 显示购物车侧边栏（仅当 bootstrap 全局可用且元素存在时）
          try {
            if (typeof window !== 'undefined' && window.bootstrap && document.getElementById('offcanvasCart')) {
              const offcanvas = new window.bootstrap.Offcanvas(document.getElementById('offcanvasCart'));
              offcanvas.show();
            }
          } catch (e) {
            // 忽略展示侧边栏失败，不影响加入购物车成功结果
          }
        } else {
          alert('加入购物车失败: ' + (response.data?.message || '未知错误'));
        }
      } catch (error) {
        console.error('加入购物车失败:', error);
        alert('加入购物车失败，请稍后重试');
      }
    },
    removeItem(id) {
      this.cartItems = this.cartItems.filter(item => item.id !== id)
      alert('已从购物车移除项目')
    },
    toggleWishlist(credit) {
      const index = this.wishlist.findIndex(item => item.id === credit.id)
      if (index === -1) {
        this.wishlist.push(credit)
        alert(`已关注 ${credit.name}`)
      } else {
        this.wishlist.splice(index, 1)
        alert(`已取消关注 ${credit.name}`)
      }
    },
    isInWishlist(id) {
      return this.wishlist.some(item => item.id === id)
    },
    checkout() {
      if (this.cartItems.length === 0) {
        alert('购物车为空，请先添加碳积分项目')
        return
      }

      alert(`订单提交成功！总金额: ¥${this.cartTotal}`)
      this.cartItems = []
    },
    searchItem(item) {
      alert(`正在搜索: ${item}`)
    }
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
@import url('https://cdn.bootcdn.net/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css');
@import url('https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha3/css/bootstrap.min.css');

.organic-store {
  font-family: 'Nunito', sans-serif;
}

.banner-section {
  background-image: url('../../public/images/banner-1.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  display: flex;
  align-items: center;
  position: relative;
}

.banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.banner-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 20px;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 15px;
}

.breadcrumb-item {
  color: #fff;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.8);
}

.banner-title {
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

@media (max-width: 768px) {
  .banner-section {
    height: 200px;
  }

  .banner-title {
    font-size: 2rem;
  }
}

/* 其他样式保持不变 */
.preloader-wrapper {
  position: fixed;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offcanvas {
  transition: transform 0.3s ease-in-out;
}

.offcanvas-start {
  width: 280px;
}

.offcanvas-end {
  width: 320px;
}

.list-group-item {
  transition: background-color 0.2s;
}

.list-group-item:hover {
  background-color: #f8f9fa;
}

.nav-link:hover {
  background-color: #f8f9fa !important;
}

.img-thumbnail {
  object-fit: cover;
  height: 60px;
}

.btn-close:focus {
  box-shadow: none;
}

.shop-page {
  min-height: 70vh;
}

.product-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  padding: 10px;
  margin-bottom: 10px;
}

.product-image img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.product-info {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-rating {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.stars {
  color: #ffb300;
  margin-right: 5px;
}

.reviews {
  font-size: 12px;
  color: #666;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.product-price del {
  font-size: 14px;
  color: #999;
  margin-right: 8px;
}

.original-price {
  color: #999;
  font-size: 14px;
}

.current-price {
  color: #e53935;
  font-size: 18px;
  font-weight: bold;
}

.discount-badge {
  background-color: #e53935;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

.product-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 5px;
}

.quantity-selector input {
  width: 50px;
  text-align: center;
  padding: 5px;
}

.add-to-cart {
  flex: 1;
  min-width: 100px;
}

.wishlist {
  flex: 1;
  min-width: 80px;
}

.card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  font-weight: 600;
  padding: 12px 15px;
}

.list-group-item {
  cursor: pointer;
  padding: 10px 15px;
  border-left: 0;
  border-right: 0;
}

.list-group-item:first-child {
  border-top: 0;
}

.list-group-item:last-child {
  border-bottom: 0;
}

.list-group-item.active {
  background-color: #f8f9fa;
  color: #0d6efd;
  font-weight: 500;
}

.badge {
  cursor: pointer;
  transition: all 0.3s ease;
}

.badge:hover {
  background-color: #0d6efd !important;
  color: white !important;
}

.pagination {
  margin-top: 30px;
}

.page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.page-link {
  color: #0d6efd;
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-actions {
    flex-direction: column;
  }

  .add-to-cart, .wishlist {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .product-image {
    height: 150px;
  }

  .product-name {
    font-size: 14px;
  }

  .current-price {
    font-size: 16px;
  }
}

.related-searches {
  background-color: #f8f9fa;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #333;
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.footer {
  background-color: #212529;
}

.footer a {
  color: #adb5bd;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #fff !important;
  text-decoration: none;
}

.footer .form-control {
  background-color: #2c3e50;
  border-color: #2c3e50;
  color: #fff;
}

.footer .form-control:focus {
  background-color: #2c3e50;
  color: #fff;
}

.text-primary {
  color: #0d6efd !important;
}

.bg-primary {
  background-color: #0d6efd !important;
}

.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
</style>